<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			h3 {
				font-weight: normal;
			}

			.clearfix::after {
				content: '';
				display: table;
				clear: both;
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			.header {
				width: 500px;
				height: 40px;
				background-color: #2D81FD;
				color: #fff;
				font-size: 14px;
				line-height: 40px;
				text-align: center;
			}

			.content {
				width: 500px;
			}

			.content .book-list {
				padding: 10px;
			}

			.content .list-item {
				height: 110px;
				margin-top: 20px;
			}

			.content .list-item:first-child {
				margin-top: 0;
			}

			.content .list-item a {
				display: block;
				width: 100px;
				height: 110px;
				background: url(http://bookcover.yuewen.com/qdbimg/349573/2952453/180) no-repeat 0/100px 150px;
			}

			.content .list-item .details {
				width: 370px;
			}

			.details .author {
				font-size: 14px;
				color: #666;
			}

			.details p {
				font-size: 12px;
				margin: 7px 0;
				color: #999;
			}

			.details .update-time {
				font-size: 14px;
				color: #666;
			}
			
			.back-top{
				position: fixed;
				bottom: 5px;
				left: 400px;
				width: 60px;
				height: 60px;
				line-height: 60px;
				background-color: #FFB52A;
				border-radius: 50%;
				text-align: center;
				color: #fff;
				font-size: 14px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="header">
			书籍列表
		</div>
		<div class="content">
			<div class="book-list">
				<div class="list-item clearfix">
					<a href="02.html" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="02.html" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
				<div class="list-item clearfix">
					<a href="#" class="fl"></a>
					<div class="details fr">
						<h3>完美世界</h3>
						<span class="author">作者：辰东</span>
						<p>《完美世界》是晨东所著的第五部小说，东方玄幻...</p>
						<span class="update-time">更新时间：2018-6-13 12:12:12</span>
					</div>
				</div>
			</div>
		</div>
		<div class="back-top">回到顶部</div>
		<script type="text/javascript">
			var backTop = document.getElementsByClassName('back-top')[0];
			
			backTop.onclick = function(){
				window.scrollTo(0, 0);
			}
		</script>
	</body>
</html>
